<template>
	<view>
		评论者:<input type="text" v-model="ipt" />
		评论内容:<input type="text" v-model="inpt" />
		<button type="primary" class="button" @click="addList" size="mini">增加#{{list.length}}</button>
		<h3>展示内容</h3>

		<view class="content">
			<view v-for="(item,index) in list" :key='index'>

				<view class="zuozhe">
					{{index+1}}.{{item.text}}说:
				</view>
				<view class="neirong">
					{{item.neirong}} <text class="shanchu" size="mini" @click="delList(index)">删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 获取input的内容
				inpt: '',
				ipt: '',
				// 列表数据
				list: [{
					text: '张三',
					neirong: '你好啊'
				}, ]
			}
		},
		methods: {
			addList() {
				//获取input框内ipt的内容
				var text = this.ipt;
				var neirong = this.inpt;
				console.log(text);
				console.log(neirong)
				if (text === '') {
					alert("请输入内容!!!")
				} else {
					this.list.push({
						text: text,
						neirong: neirong
					});

					//清空input内容
					this.ipt = '';
					this.inpt = '';
				}
			},
			// delList(index) {
			// 	//获取数组下标
			// 	// console.log(index);
			// 	// 给个提示框 是否删除 是则删除 	反之
			// 	// var isDel = window.confirm('确定要删除吗?');
			// 	uni.showToast({
			// 		title: "确定删除吗？"
			// 	})
			// 	// if(isDel){
			// 	// 	// 在list数组中查找第index个数据并删除
			// 	// 	// splice删除数组中的数据 两个参数：
			// 	// }else{
			// 	// 	alert('用户已取消删除!');
			// 	// }
			// },
			delList(index) {
				// this.list.splice(index,1)
				console.log("删除")
				uni.showModal({
					title: '提示',
					content: "确认删除该职位？",
					success: function(res) {
						if (res.confirm) {
							// this.list.splice(index,1)
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
	}
</script>

<style>
	input {
		border: 1px solid red;
		width: 45%;
		margin-top: 10px;
	}

	.button {
		position: relative;
		left: 48%;
		top: -28px;
	}

	h3 {
		margin-bottom: 20px;
		display: block;
	}

	ul {
		list-style-type: decimal;
	}

	.shanchu {
		display: block;
		line-height: 20px;
		background: #007AFF;
		position: relative;
		left: 80%;
		top: -22px;
		color: #FFFFFF;
		text-align: center;
		margin-left: 5px;
		height: 20px;
		font-size: 12px;
		width: 30px;
		border: 1px solid black;
	}

	.content {
		font-size: 14px;
		margin-left: 10%;
	}

	.neirong {
		margin-top: 2%;
		margin-left: 10%;
	}
</style>
